<template>
  <!-- <transition name="el-zoom-in-center">
        <div id="content" class="SHZY-preview-main">
            <div class="SHZY-common-page-header">
              <el-page-header @back="goBack" />

            </div> -->

  <div class="Schedule-container app-container">
    <FullCalendar
      class="demo-app-calendar"
      ref="fullCalendar"
      defaultView="dayGridMonth"
      :header="{
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek',
      }"
      :plugins="calendarPlugins"
      :weekends="calendarWeekends"
      :events="calendarEvents"
      locale="zh-cn"
      @eventClick="eventClick"
      :buttonText="buttonText"
      height="parent"
      :eventLimit="true"
      allDayText="全天"
      :editable="true"
      @datesRender="datesRender"
      :defaultDate="defaultDate"
    />
    <!-- :dayNamesShort='dayNamesShort' :dayNames='dayNamesShort' axisFormat='HH:mm' timeFormat='HH:mm' -->
    <ScheForm
      v-if="formVisible"
      ref="ScheForm"
      @refreshDataList="refreshDataList"
    />
  </div>
  <!-- </div>
    </transition> -->
</template>
  <script>
import restAPI from "@/api/q1/basedata/schedule";
import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";
import bootstrapPlugin from "@fullcalendar/bootstrap";
import ScheForm from "./ScheForm";
export default {
  name: "extend-schedule",
  props: {
    defaultDate: {
      type:String,
      default:new Date(),
    },
  },
  components: {
    FullCalendar,
    ScheForm,
  },
  data() {
    return {
      formVisible: false,
      calendarPlugins: [
        // plugins must be defined in the JS
        dayGridPlugin,
        timeGridPlugin,
        bootstrapPlugin,
        interactionPlugin, // needed for dateClick
      ],
      calendarWeekends: true,
      calendarEvents: [],
      buttonText: {
        today: "今日",
        month: "月",
        week: "周",
        day: "日",
        list: "日程",
      },
      dayNamesShort: [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ],
      titleFormat: { year: "numeric", month: "2-digit" },
      columnHeaderFormat: [
        "ddd", // Mon
        "MM月dd日 ddd", // Mon 9/7
        "MM月dd日 ddd", // Monday 9/7
      ],
      year: undefined,
      startTime: "",
      endTime: "",
    };
  },
  created() {},
  mounted() {
    // let calendarApi = this.$refs.fullCalendar.getApi()
    // console.log(calendarApi);
  },
  methods: {
    goBack() {
      this.$emit("refresh");
    },
    datesRender(calendar) {
      let view = calendar.view;

      this.startTime = this.shzy.toDate(view.activeStart, "yyyy-MM-dd");
      this.endTime = this.shzy.toDate(view.activeEnd, "yyyy-MM-dd");
      console.log(this.startTime);
      console.log(this.endTime);
      this.initData();
    },
    handleDateClick(arg) {
      let startTime = this.shzy.toDate(arg.date, "yyyy-MM-dd"),
        clickTime = this.shzy.toDate(arg.date, "yyyyMMdd"),
        currTime = this.shzy.toDate(new Date(), "yyyyMMdd");
      if (clickTime < currTime) return;
      if (clickTime == currTime) {
        let thisDate = new Date();
        thisDate.setHours(thisDate.getHours() + 1);
        startTime = this.shzy.toDate(thisDate, "yyyy-MM-dd");
      }

      this.addOrUpdateHandle("", startTime);
      //this.addOrUpdateHandle('', new Date(startTime).getTime())
    },
    eventClick(data) {
      console.log(this.$route.path);
      if (this.$route.path != "/q1/basedata/schedule/ScheIndex") {
        if (
          this.shzy.toDate(data.event.start, "yyyyMMdd") >=
          this.shzy.toDate(new Date(), "yyyyMMdd")
        ) {
          this.addOrUpdateHandle(data.event.id);
        }
      }
    },
    initData(year) {
      // let query = {
      //   startTime: new Date(this.startTime).getTime(),
      //   endTime: new Date(this.endTime).getTime(),
      // }
      let query = {
        startTime: this.startTime,
        endTime: this.endTime,
      };
      restAPI.getScheduleList(query).then((res) => {
        this.calendarEvents = res.data.list.map((o) => ({
          id: o.id,
          title: o.content,
          start: o.startTime,
          end: o.endTime,
          color: o.colour,
          editable: false,
          allDay: true,
        }));
      });
    },
    // 新增 / 修改
    addOrUpdateHandle(id, startTime) {
      console.log("iii-" + id);
      this.formVisible = true;
      this.$nextTick(() => {
        this.$refs.ScheForm.init(id, startTime, this.year);
      });
    },
    refreshDataList() {
      this.formVisible = false;
      this.initData();
    },
  },
};
</script>
  <style lang='scss'>
// you must include each plugins' css
// paths prefixed with ~ signify node_modules
@import "~@fullcalendar/core/main.css";
@import "~@fullcalendar/daygrid/main.css";
@import "~@fullcalendar/timegrid/main.css";
@import "~@fullcalendar/bootstrap/main.css";
.Schedule-container {
  padding: 0;
  .fc-toolbar.fc-header-toolbar {
    padding: 10px;
    margin-bottom: 0;
  }
  .fc-button-primary {
    background-color: #1890ff;
    border-color: #1890ff;
    height: 32px;
    line-height: 32px;
    padding: 0 0.65em;
    font-size: 12px;
  }
  .fc-button-primary:not(:disabled):active,
  .fc-button-primary:not(:disabled).fc-button-active {
    background-color: #1682e6;
    border-color: #1682e6;
  }
  .fc-button .fc-icon {
    line-height: 16px;
  }
  .fc-unthemed th {
    height: 40px;
    line-height: 40px;
    font-size: 12px;
    color: #909399;
    font-weight: normal;
    background: #f5f7fa;
  }
  .fc-center {
    color: #606266;
  }
  .fc-unthemed th,
  .fc-unthemed td,
  .fc-unthemed thead,
  .fc-unthemed tbody,
  .fc-unthemed .fc-divider,
  .fc-unthemed .fc-row,
  .fc-unthemed .fc-content,
  .fc-unthemed .fc-popover,
  .fc-unthemed .fc-list-view,
  .fc-unthemed .fc-list-heading td {
    border-color: #ebeef5;
    color: #606266;
  }
}
</style>